<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .aaa {
        height: 10px;
        background-color: green;
    }

    .bbb {
        width: 500px;
        height: 10px;
        background-color: #cccccc;
    }
</style>

<body>
    <div class="bbb">
        <div class="aaa" style="width: 100px;"></div>
    </div>
</body>
<script>
    var jindu = document.querySelector('.aaa');
    // console.log(jindu.style)
    // console.log(jindu.style.width)
    var dingshiqi = setInterval(() => {
        var jinduOld = parseInt(jindu.style.width);
        let newjindu = jinduOld + 1;
        if (newjindu < 501) {
            jindu.style = `width:${newjindu}px`;
        } else {
            clearInterval(dingshiqi)
        }
    }, 10);

    /*
        1.获取进度条的DOM 
        定时器（
            2.获取dom的宽度
            3、宽度+1
            4、赋值给dom
        ）
        进度条宽度增加
    */
</script>

</html>